<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>KPJ</title>
	<link href="css/common.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
	<link href="css/mylist.css" rel="stylesheet">
</head>

<body>
	<div class="header">
		<div class="content">
			<a class="logo"></a>
			<ul>
				<li><a href="#">发现</a></li>
				<li><a href="#">旅行家</a></li>
				<li><a href="#">旅行志</a></li>
				<li><a href="#">推荐</a></li>
				<li><a href="#"><img src="img/ico.jpg"/> nick<span></span></a></li>
			</ul>
		</div>
		
	</div>
	
	<div class="caption">
		<h3 class="name">创意<span>8张图片收录于此专辑</span><a href="#">关注</a><a href="#" class="cancel">已关注-取消</a></h3>
		<p class="desc">摄影师家的一群小鸭子。</p>
	</div>
	
	<div class="list" id="list">
		
		<div class="box userinfo">
			<img class="ico" src="img/ico2.jpg"/>
			<a href="#" class="nick">bubusy</a>
			<span class="gender female">女生</span>
			<div class="clear"></div>
			<span class="city">现居城市：<a href="#">浙江&nbsp;杭州</a></span>
			<p class="intro">
				热爱旅游！坚决不宅！！求关注啊亲！！！@。@
			</p>
			<div class="follows">
				<div class="item"><span>粉丝</span><br/><span class="num">145</span></div>
				<div class="item"><span>关注</span><br/><span class="num">120</span></div>
				<a class="follow" href="#">+&nbsp;关注</a>
				<div class="clear"></div>
			</div>
			<div class="nav">
				<a class="selected" href="userindex.html">TA的首页</a>
				<a href="mylist.html">TA收集的图片（150）</a>
				<a href="myalbumlist.html">TA的专辑（10）</a>
			</div>
		</div>
		
		<div class="box">
			<div class="hidden-btns">
				<a class="">收集</a>
				<a class="pub-c">评论</a>
			</div>
			<a href="#"><img class="pic" src="img/2.jpg"/></a>
			<p class="des">ljg lajg j;gjlkjg  ;fgggg ggg gsdfg      sfg</p>
			<ul>
				<li>
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					从
					<a class="link" href="#">somewhere</a>
					收集到
					<a class="link" href="#">somewhere</a>
				</li>
				<li class="more-c">
					<a href="#" class="label label-info">更多评论...</a>
				</li>
				<li class="comment-pub">
					<form>
						<textarea class="input-c"></textarea>
						<a class="pub-c-submit">发表</a>
						<a class="pub-c-cancel">取消</a>
					</form>
				</li>
			</ul>
			
		</div>
		
		<div class="box">
			<div class="hidden-btns">
				<a class="">收集</a>
				<a class="pub-c">评论</a>
			</div>
			<a href="#"><img class="pic" src="img/3.jpg"/></a>
			<p class="des">ljg lajg j;gjlkjg  ;fgggg ggg gsdfg      sfg</p>
			<ul>
				<li>
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					从
					<a class="link" href="#">somewhere</a>
					收集到
					<a class="link" href="#">somewhere</a>
				</li>
				<li class="comment-pub">
					<form>
						<textarea class="input-c"></textarea>
						<a class="pub-c-submit">发表</a>
						<a class="pub-c-cancel">取消</a>
					</form>
				</li>
			</ul>
			
		</div>
		
		<div class="box">
			<div class="hidden-btns">
				<a class="">收集</a>
				<a class="pub-c">评论</a>
			</div>
			<a href="#"><img class="pic" src="img/4.jpg"/></a>
			<p class="des">ljg lajg j;gjlkjg  ;fgggg ggg gsdfg      sfg</p>
			<ul>
				<li>
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					从
					<a class="link" href="#">somewhere</a>
					收集到
					<a class="link" href="#">somewhere</a>
				</li>
				<li class="comment">
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					：东京的长途公交其实不比火车便宜多少，但是如果有高速的话可以考虑坐坐看，
				</li>
				<li class="more-c">
					<a href="#" class="label label-info">更多评论...</a>
				</li>
				<li class="comment-pub">
					<form>
						<textarea class="input-c"></textarea>
						<a class="pub-c-submit">发表</a>
						<a class="pub-c-cancel">取消</a>
					</form>
				</li>
			</ul>
			
		</div>
		
		<div class="box">
			<div class="hidden-btns">
				<a class="">收集</a>
				<a class="pub-c">评论</a>
			</div>
			<a href="#"><img class="pic" src="img/5.jpg"/></a>
			<p class="des">ljg lajg j;gjlkjg  ;fgggg ggg gsdfg      sfg</p>
			<ul>
				<li>
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					从
					<a class="link" href="#">somewhere</a>
					收集到
					<a class="link" href="#">somewhere</a>
				</li>
				<li class="comment">
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					：东京的长途公交其实不比火车便宜多少，但是如果有高速的话可以考虑坐坐看，也别有情调。东京、京都和大阪间有很多快速公交。夜班车晚上10点东京八重洲发出，到京都和大阪的时间分别是第二天6am和7am。花费大概在8000日元~8500日元之间，如果买往返票能便宜一些。在站台的绿色窗口都可
				</li>
				<li class="comment-pub">
					<form>
						<textarea class="input-c"></textarea>
						<button class="btn btn-success btn-small">发表</button>
						<button class="btn btn-small pub-c-cancel" type="button">取消</button>
					</form>
				</li>
			</ul>
			
		</div>
		
		<div class="box">
			<div class="hidden-btns">
				<a class="">收集</a>
				<a class="pub-c">评论</a>
			</div>
			<a href="#"><img class="pic" src="img/6.jpg"/></a>
			<p class="des">ljg lajg j;gjlkjg  ;fgggg ggg gsdfg      sfg</p>
			<ul>
				<li>
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					从
					<a class="link" href="#">somewhere</a>
					收集到
					<a class="link" href="#">somewhere</a>
				</li>
				<li class="comment">
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					：东京的长途公交其实不比火车便宜多少，但是如果有高速的话可以考虑坐坐看，也别有情调。东京、京都和大阪间有很多快速公交。夜班车晚上10点东京八重洲发出，到京都和大阪的时间分别是第二天6am和7am。花费大概在8000日元~8500日元之间，如果买往返票能便宜一些。在站台的绿色窗口都可
				</li>
				<li class="comment">
					<a href="" class="link img"><img src="img/ico2.jpg"/></a>
					<a class="link" href="#">somebody</a>
					：东京的长途公交其实不比火车便宜多少，但是如果有高速的话可以考虑坐坐看，
				</li>
				<li class="more-c">
					<a href="#" class="label label-info">更多评论...</a>
				</li>
				<li class="comment-pub">
					<form>
						<textarea class="input-c"></textarea>
						<a class="pub-c-submit">发表</a>
						<a class="pub-c-cancel">取消</a>
					</form>
				</li>
			</ul>
			
		</div>
		
		
	</div>
	
	
	<div class="container">
	
	</div>
	<div class="gotop">
		<a href="#"></a>
	</div>
	
	<script src="js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
	<script type="text/javascript">
	function layoutList(){
		$('#list').masonry({
		    itemSelector : "#list .box",
		    containerStyle:{position:'relative'},
		    gutterWidth:20,
		    isAnimated:true,
		    isFitWidth:true
		});
	};
	layoutList();
	$('#list').imagesLoaded(function(){
		layoutList();
	});
	
	
	$('.hidden-btns').hide();
	$('.box .pic').mouseover(function(){
		$(this).parents('.box').find('.hidden-btns').show();
	})
	$('.box .pic').mouseout(function(){
		$(this).parents('.box').find('.hidden-btns').hide();
	})
	$('.hidden-btns').mouseover(function(){
		$(this).show();
	})
	$('.hidden-btns').mouseout(function(){
		$(this).hide();
	})
	
	$('.pub-c').click(function(){
		var target=$(this).parents('.box').find('.comment-pub');
		$('html,body').animate({scrollTop: target.offset().top-300}, 300);
		target.find('form').slideDown('normal',layoutList);
	})
	
	$('.pub-c-cancel').click(function(){
		$(this).parent().slideUp('normal',layoutList);
	})
	</script>
</body>
</html>